<template>
	<view class="shop-decoration">
		<ShopNavBar title="店铺装修"/>
		<view class="content">
			<view class="shop-info">
				<view class="shop-info-item">
					<view class="label"> 商户名称 </view>
					<input type="text" v-model="shop.name" />
				</view>
				<view class="shop-info-item">
					<view class="label"> 后台登陆账号 </view>
					<input type="text" v-model="shop.username" disabled />
				</view>
				<view class="shop-info-item">
					<view class="label"> 后台登陆密码 </view>
					<input type="text" v-model="shop.password" disabled />
				</view>
				<view class="shop-info-item">
					<view class="label"> 联系人 </view>
					<input type="text" v-model="shop.contacts" />
				</view>
				<view class="shop-info-item">
					<view class="label"> 联系电话 </view>
					<input type="number" v-model="shop.mobile" />
				</view>
				<view class="shop-info-item">
					<view class="label"> 客服电话 </view>
					<input type="number" v-model="shop.help_mobile" />
				</view>
			</view>
			<view class="shop-logo">
				<view class="title"> 商家logo </view>
				<view class="img-box">
					<ChooseBtn @choose="chooseLogo"/>
					<image :src="shop.logo" class="image"  />
				</view>
			</view>
			<view class="shop-adv">
				<view class="title"> 商家广告图 </view>
				<view class="img-box">
					<ChooseBtn @choose="chooseHeadImg" />
					<view class="img" v-for="(item, index) in headImgs" :key="item">
						<image :src="item" class="image" />
						<image src="/static/icon/shop/close-img.png" class="close" @tap="delHeadImg(index)"/>
					</view>
				</view>
				<view class="tips"> 支持jpg格式 </view>
			</view>
			<view class="shop-address" @tap="openLoaction">
				<view class="address-name">
					<view class="name"> 商家地址 </view>
					<image src="/static/icon/order/right.png" class="a-img"/>
				</view>
				<view class="address"> {{shop.detail_address}} </view>
			</view>
			<view class="shop-desc">
				<view class="title"> 商家简介 </view>
				<textarea 
					v-model="shop.describe_text" 
					placeholder="多行输入" 
					placeholder-style="color:#C4C4C4;font-size:14px;" 
				/>
			</view>
			<view class="shop-intro">
				<view class="title"> 商家详情 </view>
				<textarea 
					v-model="shop.intro" 
					placeholder="多行输入" 
					placeholder-style="color:#C4C4C4;font-size:14px;" 
				/>
			</view>
		</view>
    <view class="btn-box">
      <view class="btn" @tap="edit"> 确认 </view>
    </view>
  </view>
</template>

<script setup>
	import { ref } from 'vue';
	import { onLoad } from '@dcloudio/uni-app'
	import ShopNavBar from '../components/ShopNavBar.vue'
	import ChooseBtn from '@/components/ChooseBtn.vue'
	import { useShopStore, useAddressStore } from '@/store/index.js'
	import { EditShopApi } from '@/service/shop.js'
	const rightText = ref('编辑')
	const isDisabled = ref(true)
	const shop = ref({
		name: "", //店铺名称
		contacts: "", //联系人
		mobile: "", //联系人电话
		help_mobile: "", //客服电话
		logo: "", //logo
		logo_id: '',
		head_imgs: "", //商家广告图
		detail_address: "", //店铺地址
		longitude: "", //经纬度
		latitude: "", //经纬度
		describe_text: "", //描述
		intro: "", //简介
		username: '',
		password: ''
	})
	const headImgs = ref([])  // 此字段仅供展示 伦比图图片地址
	const headImgId = ref([]) // 此字段仅供展示 轮播图id数组
	const chooseHeadImg = (e) => {
		headImgId.value.push(e.id)
		headImgs.value.push(e.img_url)
	}
	const delHeadImg = (i) => {
		headImgId.value.splice(i, 1)
		headImgs.value.splice(i, 1)
	}
	const chooseLogo = (e) => {
		shop.value.logo = e.img_url
		shop.value.logo_id = e.id
	}
  const openLoaction = () => {
    const { lonlat } = useAddressStore()
    uni.chooseLocation({
      latitude: lonlat.latitude,
      longitude: lonlat.longitude,
      success: (res) => {
        shop.value.latitude = res.latitude
        shop.value.longitude = res.longitude
        shop.value.detail_address = res.address + res.name
        console.log(shop.value);
        console.log(res, 'openLoaction');
      }
    })
  }
	const edit = () => {
		let params = {
			...shop.value,
			logo: shop.value.logo_id,
			head_imgs: headImgId.value.join(','),
		}
		EditShopApi(params).then(res => {
			uni.navigateBack()
		})
	}
	onLoad(() => {
		const { shopInfo } = useShopStore()
		shop.value = {
			name: shopInfo.name,
			logo: shopInfo.logo,
			contacts: shopInfo.contacts,
			mobile: shopInfo.mobile,
			help_mobile: shopInfo.help_mobile,
			detail_address: shopInfo.detail_address,
			describe_text: shopInfo.describe_text,
			intro: shopInfo.intro,
			logo_id: shopInfo.logo_id,
			username: shopInfo.username,
			password: shopInfo.password,
      latitude: shopInfo.latitude,
      longitude: shopInfo.longitude
		}
		shopInfo.head_imgs.forEach(item => {
			if(item) {
				headImgId.value.push(item?.value)
				headImgs.value.push(item?.url)
			}
		})
	})
</script>

<style scoped lang="scss">
	.shop-decoration {
    padding-bottom: 60px;
		.content {
			padding: 10px 12px;
			.shop-info {
				padding: 0 16px;
				border-radius: 10px;
				margin-bottom: 10px;
				background-color: #fff;
				.shop-info-item {
					height: 50px;
					display: flex;
					align-items: center;
					justify-content: space-between;
					border-bottom: 1px solid #EEEEEE;
					&:nth-last-of-type(1) {
						border-bottom: none;
					}
					.label {
						color: #333333;
						font-size: 16px;
						font-weight: 400;
					}
					input {
						color: #666666;
						font-size: 14px;
						font-weight: 400;
						text-align: right;
					}
					.value {
						color: #666666;
						font-size: 14px;
						font-weight: 400;
					}
				}
			}
			.shop-logo, .shop-adv {
				padding: 20px 16px;
				border-radius: 10px;
				margin-bottom: 10px;
				background-color: #fff;
				.title {
					color: #333333;
					font-size: 16px;
					font-weight: 400;
					line-height: 20px;
					margin-bottom: 15px;
				}
				.img-box {
					display: grid;
					gap: 20rpx;
					grid-template-columns: repeat(3, 1fr);
					.img, .image {
						width: 74px;
						height: 74px;
						border-radius: 10px;
					}
					.img {
						margin-right: 0;
						position: relative;
						.close {
							position: absolute;
							top: 0;
							right: 0;
							width: 18px;
							height: 18px;
						}
					}
				}
			}
			.shop-adv {
				padding-bottom: 11px;
				.img-box {
					margin-bottom: 10px;
				}
				.tips {
					color: #AAAAAA;
					font-size: 12px;
					font-weight: 400;
					line-height: 20px;
				}
			}
			.shop-address {
				border-radius: 10px;
				margin-bottom: 10px;
				background-color: #fff;
				padding: 16px 16px 19px;
				.address-name {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-bottom: 5px;
					.name {
						color: #333333;
						font-size: 16px;
						font-weight: 400;
						line-height: 20px;
					}
					.a-img {
						width: 14px;
						height: 14px;
					}
				}
				.address {
					color: #666666;
					font-size: 14px;
					font-weight: 400;
					line-height: 20px;
				}
			}
			.shop-intro, .shop-desc {
				padding: 16px;
				border-radius: 10px;
				margin-bottom: 10px;
				background-color: #fff;
				.title {
					color: #333333;
					font-size: 16px;
					font-weight: 400;
					line-height: 20px;
					margin-bottom: 5px;
				}
				textarea {
					width: 100%;
					color: #C4C4C4;
					font-size: 14px;
					font-weight: 400;
					line-height: 20px;
				}
			}
		}
    .btn-box {
    	position: fixed;
    	left: 0;
    	right: 0;
    	bottom: 0;
    	background-color: #f4f5f7;
    	padding: 0 12px 10px;
    	.btn {
    		display: flex;
    		align-items: center;
    		justify-content: center;
    		height: 50px;
    		color: #FFFFFF;
    		font-size: 17px;
    		font-weight: 500;
    		background: #FF3B1E;
    		border-radius: 106px 106px 106px 106px;
    	}
    }
	}
</style>
